<div class="row">
    <div class="col-md-12 entry_general_header_td" style="height: 58px">
        <i class="pull-left fa fa-fw fa-globe" style="margin-top: 8px; font-size: 40px"></i>

        <h4 style="line-height: 80%; margin-top: 15px">
            <strong style="color: #888; text-transform: uppercase">{{webResults.registryPartner.name}}</strong>
            <br>
            <small class="font-65em">
                <a ng-href="https://{{webResults.registryPartner.url}}" target="_blank">{{webResults.registryPartner.url}}</a>
                <!--<span style="color: #ccc; width: 1px">&nbsp;|&nbsp;</span>-->
                <!--{{webResults.registryPartner.addTime | date:'short'}}-->
            </small>
        </h4>
    </div>
</div>

<div class="row">
    <table cellspacing="0" class="table table-hover font-95em table-border-bottom"
           ng-class="{'opacity_4':loadingPage}">
        <thead>
        <tr data-ng-if='webResults&&webResults.entries.length>0'>
            <th ng-click="sort('type')" class="cursor_pointer">
                <span style="font-size: 12px; text-transform: uppercase">TYPE</span>
                <i ng-if="queryParams.sort!=='type'" class="sortable fa fa-angle-down"></i>
                <i ng-show="queryParams.sort=='type'" style="font-size: 14px" class="fa opacity_4"
                   ng-class="{'fa-angle-down':queryParams.asc==false, 'fa-angle-up':queryParams.asc==true}"></i>
            </th>
            <th ng-click="sort('part_id')" class="cursor_pointer"
                style="font-size: 12px; text-transform: uppercase">
                <span style="font-size: 12px; text-transform: uppercase">Part ID</span>
                <i ng-if="queryParams.sort!=='part_id'" class="sortable fa fa-angle-down"></i>
                <i ng-show="queryParams.sort=='part_id'" style="font-size: 14px" class="fa opacity_4"
                   ng-class="{'fa-angle-down':queryParams.asc==false, 'fa-angle-up':queryParams.asc==true}"></i>
            </th>
            <th data-ng-click="sort('name')" class="cursor_pointer"
                style="font-size: 12px; text-transform: uppercase">
                <span style="font-size: 12px; text-transform: uppercase">Name</span>
                <i ng-if="queryParams.sort!=='name'" class="sortable fa fa-angle-down"></i>
                <i ng-show="queryParams.sort=='name'" style="font-size: 14px" class="fa opacity_4"
                   ng-class="{'fa-angle-down':queryParams.asc==false, 'fa-angle-up':queryParams.asc==true}"></i>
            </th>
            <th ng-click="sort('status')" class="cursor_pointer">
                <span style="font-size: 11px; text-transform: uppercase">Status</span>
                <i ng-if="queryParams.sort!=='status'" class="sortable fa fa-angle-down"></i>
                <i ng-show="queryParams.sort=='status'" style="font-size: 14px" class="fa opacity_4"
                   ng-class="{'fa-angle-down':queryParams.asc==false, 'fa-angle-up':queryParams.asc==true}"></i>
            </th>
            <th style="width:100px;">
                <i class="fa fa-flask fa-fw" style="font-size: 14px; "></i>
                <img src="img/dna.svg" width="15px" alt="has dna"/>
            </th>
            <th ng-click="sort('created')" class="cursor_pointer">
                <span style="font-size: 11px; text-transform: uppercase">Created</span>
                <i ng-show="queryParams.sort=='created'" style="font-size: 14px" class="fa opacity_4"
                   ng-class="{'fa-angle-down':queryParams.asc==false, 'fa-angle-up':queryParams.asc==true}"></i>
                <i ng-if="queryParams.sort!=='created'" class="sortable fa fa-angle-down"></i>
            </th>
        </tr>

        <tr data-ng-show='!webResults && loadingPage'>
            <td colspan="10">
                <img alt="Loading..." src="img/loader-mini.gif"/>
                Loading...
            </td>
        </tr>
        <tr data-ng-show="webResults.entries.length == 0">
            <td colspan="10">No entries available</td>
        </tr>
        </thead>
        <tbody>
        <tr data-ng-repeat="entry in webResults.entries">
            <td style="opacity:0.7; font-weight: bold; font-size: 0.85em; text-shadow: 0 1px 0 #fff">
                {{entry.type | uppercase}}
            </td>
            <td><a ng-href="web/{{webResults.registryPartner.id}}/entry/{{entry.id}}"
                   ng-click="showEntryDetails(entry, $index)" class="cell_mouseover form-group"
                   popover-trigger="mouseenter" ng-mouseover="tooltipDetails(entry)"
                   uib-popover-template="worContentsPopoverTemplate"
                   popover-placement="right">{{entry.partId}}</a>
            </td>
            <td>
                <div title="{{entry.name}}" class="ellipsis" style="width: 350px">{{entry.name}}</div>
                <div title="{{entry.shortDescription}}" class="small"
                     style="opacity: 0.6; width: 350px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                    {{entry.shortDescription}}
                </div>
            </td>
            <td style="vertical-align: middle; width:100px; white-space:nowrap">
                <span class="label" ng-class="{
                'ice-label-success':entry.status.toUpperCase()=='COMPLETE',
                'label-default': entry.status.toUpperCase()=='In Progress'.toUpperCase(),
                'ice-label-danger': entry.status.toUpperCase()=='Abandoned'.toUpperCase(),
                'ice-label-info': entry.status.toUpperCase()=='Planned'.toUpperCase()}">{{entry.status | capitalize}}
                </span>
            </td>
            <td style="vertical-align: middle;">
                <i ng-show="entry.hasSample" class="fa fa-flask fa-fw"
                   style="color: #555; font-size: 14px;"></i>
                <i ng-show="!entry.hasSample" class="fa fa-square fa-fw"
                   style="opacity: 0; font-size: 14px;"></i>
                <img ng-show="entry.hasSequence" src="img/dna.svg" width="15px"/>
            </td>
            <td style="width:130px; white-space:nowrap; vertical-align: middle;">
                {{entry.creationTime | date:'MMM d, yyyy'}}
            </td>
        </tr>
        </tbody>
    </table>
</div>

<div class="row" ng-if="webResults && webResults.entries.length > 0">
    <div class="col-md-6" style="padding-left: 0">
        <uib-pagination total-items="webResults.count" ng-change="worContentsPageChange()"
                        ng-model="queryParams.currentPage"
                        max-size="maxSize" class="pagination-sm" items-per-page="15"
                        boundary-links="true"></uib-pagination>
    </div>
    <div class="col-md-4" style="margin-top: 25px;">
        <strong class="small">
            <i ng-show="loadingPage" class="fa fa-spin fa-gear opacity_4"></i> {{pageCounts(queryParams.currentPage,
            webResults.count)}}
        </strong>
    </div>
    <div class="col-md-2" style="margin-top: 25px;">
        <small class="text-muted pull-right">Show:
            <select ng-change="hStepChanged()" ng-model="queryParams.limit"
                    ng-options="opt for opt in queryParams.hstep"></select></small>
    </div>
</div>

